<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Home one || Hurst</title>
    <meta name="description"
          content="Hurst – Furniture Store eCommerce HTML Template is a clean and elegant design – suitable for selling flower, cookery, accessories, fashion, high fashion, accessories, digital, kids, watches, jewelries, shoes, kids, furniture, sports….. It has a fully responsive width adjusts automatically to any screen size or resolution.">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="shortcut icon" type="image/x-icon" href="assets/picture/favicon.ico">
    <!-- Place favicon.ico in the root directory -->

    <!-- Google Font -->
    <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>

    <!-- all css here -->
    <!-- bootstrap v3.3.6 css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <!-- jquery-ui.min css -->
    <link rel="stylesheet" href="assets/css/jquery-ui.min.css">
    <!-- meanmenu css -->
    <link rel="stylesheet" href="assets/css/meanmenu.min.css">
    <!-- nivo-slider css -->
    <link rel="stylesheet" href="assets/css/nivo-slider.css">
    <link rel="stylesheet" href="assets/css/preview.css">
    <!-- slick css -->
    <link rel="stylesheet" href="assets/css/slick.min.css">
    <!-- lightbox css -->
    <link rel="stylesheet" href="assets/css/lightbox.min.css">
    <!-- material-design-iconic-font css -->
    <link rel="stylesheet" href="assets/css/material-design-iconic-font.css">
    <!-- All common css of theme -->
    <link rel="stylesheet" href="assets/css/default.css">
    <!-- style css -->
    <link rel="stylesheet" href="assets/css/style.min.css">
    <!-- shortcode css -->
    <link rel="stylesheet" href="assets/css/shortcode.css">
    <!-- responsive css -->
    <link rel="stylesheet" href="assets/css/responsive.css">
    <!-- modernizr css -->
    <script src="assets/js/modernizr-3.11.2.min.js"></script>
</head>
<body>
<!-- WRAPPER START -->
<div class="wrapper">

    <!-- Mobile-header-top Start -->
    <div class="mobile-header-top d-block d-md-none">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <!-- header-search-mobile start -->
                    <div class="header-search-mobile">
                        <div class="table">
                            <div class="table-cell">
                                <ul>
                                    <li><a class="search-open" href="#"><i class="zmdi zmdi-search"></i></a></li>
                                    <li><a href="login.html"><i class="zmdi zmdi-lock"></i></a></li>
                                    <li><a href="my-account.html"><i class="zmdi zmdi-account"></i></a></li>
                                    <li><a href="wishlist.html"><i class="zmdi zmdi-favorite"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- header-search-mobile start -->
                </div>
            </div>
        </div>
    </div>
    <!-- Mobile-header-top End -->
    <!-- HEADER-AREA START -->
    <header id="sticky-menu" class="header">
        <div class="header-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-4 offset-md-4 col-7">
                        <div class="logo text-md-center">
                            <a href=""><img src="assets/picture/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col-md-4 col-5">
<!--                        <div class="mini-cart text-end">-->
<!--                            <ul>-->
<!--                                <li>-->
<!--                                    <a class="cart-icon" href="#">-->
<!--                                        <i class="zmdi zmdi-shopping-cart"></i>-->
<!--                                        &lt;!&ndash;TODO 计算综合，这是右上角购物车小红数量&ndash;&gt;-->
<!--                                        <span>3</span>-->
<!--                                    </a>-->
<!--                                    <div class="mini-cart-brief text-left">-->
<!--                                        <div class="cart-items">-->
<!--                                            <p class="mb-0">你有 <span>计算总和（几个东西</span> 在你的购物车</p>-->
<!--                                        </div>-->

<!--                                        &lt;!&ndash;TODO 购物车&ndash;&gt;-->
<!--                                        <div class="all-cart-product clearfix">-->
<!--                                            <div class="single-cart clearfix">-->
<!--                                                &lt;!&ndash;TODO 购物车内容，此模块作为动态生成，需要后端提供数据&ndash;&gt;-->
<!--                                                <div class="cart-photo">-->
<!--                                                    &lt;!&ndash;TODO 传图&ndash;&gt;-->
<!--                                                    <a href="#"><img src="" alt=""></a>-->
<!--                                                </div>-->
<!--                                                <div class="cart-info">-->
<!--                                                    <h5><a href="#">dummy product name</a></h5>-->
<!--                                                    &lt;!&ndash;TODO 传价格&ndash;&gt;-->
<!--                                                    <p class="mb-0">Price : $ 100.00</p>-->
<!--                                                    <p class="mb-0">Qty : 02 </p>-->
<!--                                                    <span class="cart-delete"><a href="#"><i-->
<!--                                                            class="zmdi zmdi-close"></i></a></span>-->
<!--                                                </div>-->
<!--                                            </div>-->

<!--                                        </div>-->

<!--                                        &lt;!&ndash;TODO 购物车结算&ndash;&gt;-->
<!--                                        <div class="cart-totals">-->
<!--                                            &lt;!&ndash;TODO 传价格&ndash;&gt;-->
<!--                                            <h5 class="mb-0">Total <span class="floatright">$500.00</span></h5>-->
<!--                                        </div>-->
<!--                                        <div class="cart-bottom  clearfix">-->
<!--                                            <a href="cart.html" class="button-one floatleft text-uppercase"-->
<!--                                               data-text="View cart">购物车</a>-->
<!--                                            <a href="checkout.html" class="button-one floatright text-uppercase"-->
<!--                                               data-text="Check out">支付</a>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
                    </div>
                </div>
            </div>
        </div>
        <!-- MAIN-MENU START 左侧菜单-->
        <div class="menu-toggle hamburger hamburger--emphatic d-none d-md-block">
            <div class="hamburger-box">
                <div class="hamburger-inner"></div>
            </div>
        </div>
        <div class="main-menu  d-none d-md-block">
            <nav>
                <ul>
                    <li><a href="index.html">主页</a></li>
                    <li><a href="shop.html">商品</a>
                        <div class="mega-menu menu-scroll">
                            <div class="table">
                                <div class="table-cell">
                                    <div class="half-width">
                                        <ul>
                                            <li class="menu-title">高评分</li>
                                            <!--TODO 商品列表-->
                                            <li><a href="#">henning koppel</a></li>
                                            <li><a href="#">jehs + Laub</a></li>
                                            <li><a href="#">vicke lindstrand</a></li>
                                            <li><a href="#">don chadwick</a></li>
                                            <li><a href="#">akiko kuwahata</a></li>
                                            <li><a href="#">barbro berlin</a></li>
                                            <li><a href="#">cecilia hall</a></li>
                                            <li><a href="#">don chadwick</a></li>
                                        </ul>
                                    </div>
                                    <div class="half-width">
                                        <ul>
                                            <li class="menu-title">流行的</li>
                                            <!--TODO 商品列表-->
                                            <li><a href="#">akiko kuwahata</a></li>
                                            <li><a href="#">barbro berlin</a></li>
                                            <li><a href="#">cecilia hall</a></li>
                                            <li><a href="#">don chadwick</a></li>
                                            <li><a href="#">henning koppel</a></li>
                                            <li><a href="#">jehs + Laub</a></li>
                                            <li><a href="#">vicke lindstrand</a></li>
                                            <li><a href="#">don chadwick</a></li>
                                        </ul>
                                    </div>
                                    <div class="full-width">
                                        <div class="mega-menu-img">
                                            <!--TODO 商品列表下的图片保留?更改-->
                                            <a href="single-product.html"><img src="assets/picture/13.jpg" alt=""></a>
                                        </div>
                                    </div>
                                    <div class="pb-80"></div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="cart.html">购物车</a>
                    </li>
                    <li><a href="my-account.html">个人信息</a></li>

                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="contact.html">导航</a></li>
                </ul>
            </nav>
        </div>
        <!-- MAIN-MENU END -->
    </header>
    <!-- HEADER-AREA END -->
    <!-- Mobile-menu start  移动菜单-->
    <div class="mobile-menu-area">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 d-block d-md-none">
                    <div class="mobile-menu">
                        <nav id="dropdown">
                            <ul>
                                <li><a href="">home</a>
                                    <ul>
                                        <li><a href="">Home Version 1</a></li>
                                        <li><a href="index-2.html">Home Version 2</a></li>
                                    </ul>
                                </li>
                                <li><a href="shop.html">products</a></li>
                                <li><a href="shop-sidebar.html">accesories</a></li>
                                <li><a href="shop-list.html">lookbook</a></li>
                                <li><a href="blog.html">blog</a></li>
                                <li><a href="#">pages</a>
                                    <ul>
                                        <li><a href="shop.html">Shop</a></li>
                                        <li><a href="shop-sidebar.html">Shop Sidebar</a></li>
                                        <li><a href="shop-list.html">Shop List</a></li>
                                        <li><a href="single-product.html">Single Product</a></li>
                                        <li><a href="single-product-sidebar.html">Single Product Sidebar</a></li>
                                        <li><a href="cart.html">Shopping Cart</a></li>
                                        <li><a href="wishlist.html">Wishlist</a></li>
                                        <li><a href="checkout.html">Checkout</a></li>
                                        <li><a href="order.html">Order</a></li>
                                        <li><a href="login.html">login / Registration</a></li>
                                        <li><a href="my-account.html">My Account</a></li>
                                        <li><a href="404.html">404</a></li>
                                        <li><a href="blog.html">Blog</a></li>
                                        <li><a href="single-blog.html">Single Blog</a></li>
                                        <li><a href="single-blog-sidebar.html">Single Blog Sidebar</a></li>
                                        <li><a href="about.html">About Us</a></li>
                                        <li><a href="contact.html">Contact</a></li>
                                    </ul>
                                </li>
                                <li><a href="about.html">about us</a></li>
                                <li><a href="contact.html">contact</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Mobile-menu end -->
    <!-- SLIDER-BANNER-AREA START -->
    <section class="slider-banner-area clearfix">
        <!-- Sidebar-social-media start -->
        <div class="sidebar-social d-none d-md-block">
            <div class="table">
                <div class="table-cell">
                    <ul>
                        <li><a href="#" target="_blank" title="Google Plus"><i class="zmdi zmdi-google-plus"></i></a>
                        </li>
                        <li><a href="#" target="_blank" title="Twitter"><i class="zmdi zmdi-twitter"></i></a></li>
                        <li><a href="#" target="_blank" title="Facebook"><i class="zmdi zmdi-facebook"></i></a></li>
                        <li><a href="#" target="_blank" title="Linkedin"><i class="zmdi zmdi-linkedin"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Sidebar-social-media start -->
        <div class="banner-left floatleft">
            <!-- Slider-banner start -->
            <div class="slider-banner">
                <!-- TODO 左侧两商品传值-->
                <div class="single-banner banner-1">
                    <a class="banner-thumb" href="#"><img src="assets/picture/14.jpg" alt=""></a>
                    <span class="pro-label new-label">new</span>
                    <span class="price">$50.00</span>
                    <div class="banner-brief">
                        <h2 class="banner-title"><a href="#">商品名</a></h2>
                        <p class="mb-0">设备</p>
                    </div>
                    <a href="#" class="button-one font-16px" data-text="Buy now">立即购买</a>
                </div>
                <div class="single-banner banner-2">
                    <a class="banner-thumb" href="#"><img src="assets/picture/21.jpg" alt=""></a>
                    <div class="banner-brief">
                        <h2 class="banner-title"><a href="#">新商品 2025</a></h2>
                        <p class="hidden-md hidden-sm d-none d-md-block">商品介绍.</p>
                        <a href="#" class="button-one font-16px" data-text="Buy now">立即购买</a>
                    </div>
                </div>

            </div>
            <!-- Slider-banner end -->
        </div>
        <div class="slider-right floatleft">
            <!-- Slider-area start -->
            <div class="slider-area">
                <!-- TODO 轮播图写死？传值-->
                <div class="bend niceties preview-2">
                    <div id="ensign-nivoslider" class="slides">
                        <img src="assets/picture/15.jpg" alt="" title="#slider-direction-1">
                        <img src="assets/picture/22.jpg" alt="" title="#slider-direction-2">
                        <img src="assets/picture/31.jpg" alt="" title="#slider-direction-3">
                    </div>
                    <!-- direction 1 -->
                    <div id="slider-direction-1" class="t-cn slider-direction">
                        <div class="slider-progress"></div>
                        <div class="slider-content t-lfl s-tb slider-1">
                            <div class="title-container s-tb-c title-compress">
                                <div class="layer-1">
                                    <div class="wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
                                        <h2 class="slider-title3 text-uppercase mb-0">欢迎访问此网站</h2>
                                    </div>
                                    <div class="wow fadeIn" data-wow-duration="1.5s" data-wow-delay="1.5s">
                                        <h2 class="slider-title1 text-uppercase mb-0">好</h2>
                                    </div>
                                    <div class="wow fadeIn" data-wow-duration="2s" data-wow-delay="2.5s">
                                        <h3 class="slider-title2 text-uppercase">2025敬请期待</h3>
                                    </div>
                                    <div class="wow fadeIn" data-wow-duration="2.5s" data-wow-delay="3.5s">
                                        <a href="#" class="button-one style-2 text-uppercase mt-20"
                                           data-text="Shop now">现在就要购物！</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- direction 2 -->
                    <div id="slider-direction-2" class="slider-direction">
                        <div class="slider-progress"></div>
                        <div class="slider-content t-lfl s-tb slider-1">
                            <div class="title-container s-tb-c title-compress">
                                <div class="layer-1">
                                    <div class="wow fadeInUpBig" data-wow-duration="1s" data-wow-delay="0.5s">
                                        <h2 class="slider-title3 text-uppercase mb-0">这是轮播图2</h2>
                                    </div>
                                    <div class="wow fadeInUpBig" data-wow-duration="1.5s" data-wow-delay="0.5s">
                                        <h2 class="slider-title1 text-uppercase">第二个好</h2>
                                    </div>
                                    <div class="wow fadeInUpBig" data-wow-duration="2s" data-wow-delay="0.5s">
                                        <p class="slider-pro-brief">这有很多的商品</p>
                                    </div>
                                    <div class="wow fadeInUpBig" data-wow-duration="2.5s" data-wow-delay="0.5s">
                                        <a href="#" class="button-one style-2 text-uppercase mt-20"
                                           data-text="Shop now">Shop now</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- direction 3 -->
                    <div id="slider-direction-3" class="slider-direction">
                        <div class="slider-progress"></div>
                        <div class="slider-content t-lfl s-tb slider-1">
                            <div class="title-container s-tb-c title-compress">
                                <div class="layer-1">
                                    <div class="wow fadeInUpBig" data-wow-duration="1s" data-wow-delay="0.5s">
                                        <h2 class="slider-title3 text-uppercase mb-0">welcome to our</h2>
                                    </div>
                                    <div class="wow fadeInUpBig" data-wow-duration="1.5s" data-wow-delay="0.5s">
                                        <h2 class="slider-title1 text-uppercase mb-0">furniture</h2>
                                    </div>
                                    <div class="wow fadeInUpBig" data-wow-duration="2s" data-wow-delay="0.5s">
                                        <h3 class="slider-title2 text-uppercase">gallery 2021</h3>
                                    </div>
                                    <div class="wow fadeInUpBig" data-wow-duration="2.5s" data-wow-delay="0.5s">
                                        <p class="slider-pro-brief">There are many variations of passages of Lorem Ipsum
                                            available, but the majority have suffered alteration in some form, by
                                            injected humour, or randomised words which don't look even slightly
                                            believable</p>
                                    </div>
                                    <div class="wow fadeInUpBig" data-wow-duration="3s" data-wow-delay="0.5s">
                                        <a href="#" class="button-one style-2 text-uppercase mt-20"
                                           data-text="Shop now">购物现在！</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Slider-area end -->
        </div>
        <!-- Sidebar-social-media start -->
    </section>
    <!-- End Slider-section -->
    <!-- sidebar-search Start -->
    <div class="sidebar-search animated slideOutUp">
        <div class="table">
            <div class="table-cell">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 offset-md-2 p-0">
                            <div class="search-form-wrap">
                                <button class="close-search"><i class="zmdi zmdi-close"></i></button>
                                <form action="javascript:;">
                                    <input type="text" placeholder="在这里输入...">
                                    <button class="search-button" type="submit">
                                        <i class="zmdi zmdi-search"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- sidebar-search End -->
    <!-- PRODUCT-AREA START -->
    <div class="product-area pt-80 pb-35">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title text-center">
                        <h2 class="title-border">特色产品</h2>
                    </div>
                    <div class="product-slider style-1 arrow-left-right">
                        <div class="row" id="product-container">
                            <!-- 商品将通过Ajax动态加载到这里 -->
                        </div>

                        <!-- TODO 产品特色部分，全部传值，start-end-->
                        <!-- Single-product start -->
                        <div class="single-product">
                            <!--图片层-->
                            <div class="product-img">
                                <span class="pro-label new-label">新</span>
                                <a href="single-product.html"><img src="assets/picture/16.jpg" alt=""></a>
                                <div class="product-action clearfix">
                                    <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                       title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                    <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                       title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                            class="zmdi zmdi-refresh"></i></a>
                                    <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                       title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                </div>
                            </div>
                            <!--文本层-->
                            <div class="product-info clearfix">
                                <div class="fix">
                                    <h4 class="post-title floatleft"><a href="#">产品名</a></h4>
                                    <p class="floatright hidden-sm d-none d-md-block">设备</p>
                                </div>
                                <div class="fix">
                                    <!-- TODO 传值价格-->
                                    <span class="pro-price floatleft">$ 56.20</span>
                                </div>
                            </div>
                        </div>
                        <!-- Single-product end -->
                        <!-- Single-product start -->
                        <!-- TODO 商品传值-->
                        <div class="single-product">

                            <div class="product-img">
                                <span class="pro-label sale-label">销售</span>
                                <a href="single-product.html"><img src="assets/picture/23.jpg" alt=""></a>
                                <div class="product-action clearfix">
                                    <!-- 商品的爱心，跳转至愿望清单-->
                                    <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                       title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                    <!-- 放大镜按钮，点击查看具体信息-->
                                    <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                       title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                    <!-- 返回顶部按钮？-->
                                    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                            class="zmdi zmdi-refresh"></i></a>
                                    <!-- AddToCart，添加购物车按钮，点击跳转至购物车-->
                                    <!-- TODO 商品传值给购物车-->
                                    <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                       title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                </div>
                            </div>

                            <div class="product-info clearfix">
                                <div class="fix">
                                    <h4 class="post-title floatleft"><a href="#">产品名</a></h4>
                                    <p class="floatright hidden-sm d-none d-md-block">设备</p>
                                </div>
                                <div class="fix">
                                    <span class="pro-price floatleft">$ 56.20</span>
                                    <span class="pro-rating floatright">
												<a href="#"><i class="zmdi zmdi-star"></i></a>
												<a href="#"><i class="zmdi zmdi-star"></i></a>
												<a href="#"><i class="zmdi zmdi-star"></i></a>
												<a href="#"><i class="zmdi zmdi-star-half"></i></a>
												<a href="#"><i class="zmdi zmdi-star-half"></i></a>
											</span>
                                </div>
                            </div>
                        </div>
                        <!-- Single-product end -->
                        <!-- Single-product start -->
                        <div class="single-product">
                            <div class="product-img">
                                <a href="single-product.html"><img src="assets/picture/32.jpg" alt=""></a>
                                <div class="product-action clearfix">
                                    <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                       title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                    <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                       title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                            class="zmdi zmdi-refresh"></i></a>
                                    <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                       title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                </div>
                            </div>
                            <div class="product-info clearfix">
                                <div class="fix">
                                    <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                    <p class="floatright hidden-sm d-none d-md-block">Furniture</p>
                                </div>
                                <div class="fix">
                                    <span class="pro-price floatleft">$ 56.20</span>
                                    <span class="pro-rating floatright">
												<a href="#"><i class="zmdi zmdi-star"></i></a>
												<a href="#"><i class="zmdi zmdi-star"></i></a>
												<a href="#"><i class="zmdi zmdi-star"></i></a>
												<a href="#"><i class="zmdi zmdi-star-half"></i></a>
												<a href="#"><i class="zmdi zmdi-star-half"></i></a>
											</span>
                                </div>
                            </div>
                        </div>
                        <!-- Single-product end -->
                        <!-- Single-product start -->
                        <div class="single-product">
                            <div class="product-img">
                                <a href="single-product.html"><img src="assets/picture/4.jpg" alt=""></a>
                                <div class="product-action clearfix">
                                    <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                       title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                    <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                       title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                            class="zmdi zmdi-refresh"></i></a>
                                    <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                       title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                </div>
                            </div>
                            <div class="product-info clearfix">
                                <div class="fix">
                                    <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                    <p class="floatright hidden-sm d-none d-md-block">Furniture</p>
                                </div>
                                <div class="fix">
                                    <span class="pro-price floatleft">$ 56.20</span>
                                    <span class="pro-rating floatright">
												<a href="#"><i class="zmdi zmdi-star"></i></a>
												<a href="#"><i class="zmdi zmdi-star"></i></a>
												<a href="#"><i class="zmdi zmdi-star"></i></a>
												<a href="#"><i class="zmdi zmdi-star-half"></i></a>
												<a href="#"><i class="zmdi zmdi-star-half"></i></a>
											</span>
                                </div>
                            </div>
                        </div>
                        <!-- Single-product end -->
                        <!-- Single-product start -->
                        <div class="single-product">
                            <div class="product-img">
                                <span class="pro-label new-label">new</span>
                                <a href="single-product.html"><img src="assets/picture/32.jpg" alt=""></a>
                                <div class="product-action clearfix">
                                    <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                       title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                    <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                       title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                            class="zmdi zmdi-refresh"></i></a>
                                    <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                       title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                </div>
                            </div>
                            <div class="product-info clearfix">
                                <div class="fix">
                                    <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                    <p class="floatright hidden-sm d-none d-md-block">Furniture</p>
                                </div>
                                <div class="fix">
                                    <span class="pro-price floatleft">$ 56.20</span>
                                    <span class="pro-rating floatright">
												<a href="#"><i class="zmdi zmdi-star"></i></a>
												<a href="#"><i class="zmdi zmdi-star"></i></a>
												<a href="#"><i class="zmdi zmdi-star"></i></a>
												<a href="#"><i class="zmdi zmdi-star-half"></i></a>
												<a href="#"><i class="zmdi zmdi-star-half"></i></a>
											</span>
                                </div>
                            </div>
                        </div>
                        <!-- Single-product end -->



                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- PRODUCT-AREA END -->
    <!-- DISCOUNT-PRODUCT START -->
    <div class="discount-product-area">
        <div class="container">
            <div class="row">
                <div class="discount-product-slider dots-bottom-right">


                    <!-- single-discount-product start 中部轮播图-->
                    <div class="col-lg-12">
                        <div class="discount-product">
                            <img src="assets/picture/17.jpg" alt="">
                            <div class="discount-img-brief">
                                <div class="onsale">
                                    <span class="onsale-text">On Sale</span>
                                    <span class="onsale-price">$ 80.00</span>
                                </div>
                                <div class="discount-info">
                                    <h1 class="text-dark-red d-none d-md-block">降价 50%</h1>
                                    <p class="d-none d-md-block">很长的一段文本</p>
                                    <a href="#" class="button-one font-16px style-3 text-uppercase mt-md-5"
                                       data-text="Buy now">立即购买，未加购买页面</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- single-discount-product end -->
                    <!-- single-discount-product start -->
                    <div class="col-lg-12">
                        <div class="discount-product">
                            <img src="assets/picture/24.jpg" alt="">
                            <div class="discount-img-brief">
                                <div class="onsale">
                                    <span class="onsale-text">On Sale</span>
                                    <span class="onsale-price">$ 80.00</span>
                                </div>
                                <div class="discount-info">
                                    <h1 class="text-dark-red d-none d-md-block">Discount 50%</h1>
                                    <p class="d-none d-md-block">Lorem ipsum dolor sit amet, consectetur adipiscing
                                        elit, sed does eiusmodes tempor incididunt ut labore et dolore magna aliqua. Ut
                                        enim ad minim venim, quis nostrud exercitation ullamco laboris.</p>
                                    <a href="#" class="button-one font-16px style-3 text-uppercase mt-md-5"
                                       data-text="Buy now">立即购买，未加购买页面</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- single-discount-product end -->
                    <!-- single-discount-product start -->
                    <div class="col-lg-12">
                        <div class="discount-product">
                            <img src="assets/picture/17.jpg" alt="">
                            <div class="discount-img-brief">
                                <div class="onsale">
                                    <span class="onsale-text">On Sale</span>
                                    <span class="onsale-price">$ 80.00</span>
                                </div>
                                <div class="discount-info">
                                    <h1 class="text-dark-red d-none d-md-block">Discount 50%</h1>
                                    <p class="d-none d-md-block">Lorem ipsum dolor sit amet, consectetur adipiscing
                                        elit, sed does eiusmodes tempor incididunt ut labore et dolore magna aliqua. Ut
                                        enim ad minim venim, quis nostrud exercitation ullamco laboris.</p>
                                    <a href="#" class="button-one font-16px style-3 text-uppercase mt-md-5"
                                       data-text="Buy now">立即购买，未加购买页面</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- single-discount-product end -->
                    <!-- single-discount-product start -->
                    <div class="col-lg-12">
                        <div class="discount-product">
                            <img src="assets/picture/24.jpg" alt="">
                            <div class="discount-img-brief">
                                <div class="onsale">
                                    <span class="onsale-text">On Sale</span>
                                    <span class="onsale-price">$ 80.00</span>
                                </div>
                                <div class="discount-info">
                                    <h1 class="text-dark-red d-none d-md-block">Discount 50%</h1>
                                    <p class="d-none d-md-block">Lorem ipsum dolor sit amet, consectetur adipiscing
                                        elit, sed does eiusmodes tempor incididunt ut labore et dolore magna aliqua. Ut
                                        enim ad minim venim, quis nostrud exercitation ullamco laboris.</p>
                                    <a href="#" class="button-one font-16px style-3 text-uppercase mt-md-5"
                                       data-text="Buy now">立即购买，未加购买页面</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- single-discount-product end -->


                </div>
            </div>
        </div>
    </div>
    <!-- DISCOUNT-PRODUCT END -->
    <!-- PURCHASE-ONLINE-AREA START -->
    <div class="purchase-online-area pt-80">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title text-center">
                        <h2 class="title-border">在我这购物吧！</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 text-center">
                    <!-- Nav tabs -->
                    <ul class="tab-menu nav clearfix">
                        <li><a class="active" href="#new-arrivals" data-bs-toggle="tab">新商品</a></li>
                        <li><a href="#best-seller" data-bs-toggle="tab">最好的 </a></li>
                        <li><a href="#most-view" data-bs-toggle="tab">最多浏览</a></li>
                        <li><a href="#discounts" data-bs-toggle="tab">打折的</a></li>
                    </ul>
                </div>
                <div class="col-lg-12">
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <!--TODO 以下需要传入商品-->
                        <div class="tab-pane active" id="new-arrivals">
                            <div class="row">
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label new-label">new</span>
                                        <a href="single-product.html"><img src="assets/picture/5.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 56.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label sale-label">Sale</span>
                                        <a href="single-product.html"><img src="assets/picture/6.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 36.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/32.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 66.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/7.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 57.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label new-label">new</span>
                                        <a href="single-product.html"><img src="assets/picture/16.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 55.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label sale-label">Sale</span>
                                        <a href="single-product.html"><img src="assets/picture/23.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 65.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/8.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 60.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/9.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 66.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                            </div>
                        </div>
                        <!--TODO 以下需要传入商品-->
                        <div class="tab-pane" id="best-seller">
                            <div class="row">
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label new-label">new</span>
                                        <a href="single-product.html"><img src="assets/picture/23.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 56.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label sale-label">Sale</span>
                                        <a href="single-product.html"><img src="assets/picture/9.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 36.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/8.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 66.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/6.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 57.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label new-label">new</span>
                                        <a href="single-product.html"><img src="assets/picture/4.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 55.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label sale-label">Sale</span>
                                        <a href="single-product.html"><img src="assets/picture/32.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 65.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/7.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 60.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/5.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 66.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                            </div>
                        </div>
                        <!--TODO 以下需要传入商品-->
                        <div class="tab-pane" id="most-view">
                            <div class="row">
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label new-label">new</span>
                                        <a href="single-product.html"><img src="assets/picture/16.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 56.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label sale-label">Sale</span>
                                        <a href="single-product.html"><img src="assets/picture/32.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 36.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/5.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 66.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/9.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 57.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label new-label">new</span>
                                        <a href="single-product.html"><img src="assets/picture/7.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 55.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label sale-label">Sale</span>
                                        <a href="single-product.html"><img src="assets/picture/5.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 65.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/7.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 60.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/8.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 66.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                            </div>
                        </div>

                        <!--TODO 以下需要传入商品-->
                        <div class="tab-pane" id="discounts">
                            <div class="row">
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label new-label">new</span>
                                        <a href="single-product.html"><img src="assets/picture/8.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 56.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label sale-label">Sale</span>
                                        <a href="single-product.html"><img src="assets/picture/9.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 36.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/7.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 66.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/6.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 57.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label new-label">new</span>
                                        <a href="single-product.html"><img src="assets/picture/32.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 55.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <span class="pro-label sale-label">Sale</span>
                                        <a href="single-product.html"><img src="assets/picture/4.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 65.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/5.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 60.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                                <!-- Single-product start -->
                                <div class="single-product col-xl-3 col-lg-4 col-md-6">
                                    <div class="product-img">
                                        <a href="single-product.html"><img src="assets/picture/23.jpg" alt=""></a>
                                        <div class="product-action clearfix">
                                            <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                               title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                            <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                                    class="zmdi zmdi-refresh"></i></a>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                               title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-info clearfix">
                                        <div class="fix">
                                            <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
                                            <p class="floatright hidden-sm">Furniture</p>
                                        </div>
                                        <div class="fix">
                                            <span class="pro-price floatleft">$ 66.20</span>
                                            <span class="pro-rating floatright">
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
														<a href="#"><i class="zmdi zmdi-star-half"></i></a>
													</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single-product end -->
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- PURCHASE-ONLINE-AREA END -->
    <!-- BLGO-AREA START -->
    <div class="blog-area pt-55">

        <!--博客-->
        <div class="container">
            <!-- Section-title start -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title text-center">
                        <h2 class="title-border">从博客上</h2>
                    </div>
                </div>
            </div>
            <!-- Section-title end -->
            <div class="row">
                <!-- Single-blog start -->
                <div class="col-lg-6">
                    <div class="single-blog mt-30">
                        <div class="row">
                            <div class="col-xl-6 col-md-7">
                                <div class="blog-info">
                                    <div class="post-meta fix">
                                        <div class="post-date floatleft"><span class="text-dark-red">30</span></div>
                                        <div class="post-year floatleft">
                                            <p class="text-uppercase text-dark-red mb-0">六月, 2021</p>
                                            <h4 class="post-title"><a href="#" tabindex="0">家具画 2021</a>
                                            </h4>
                                        </div>
                                    </div>
                                    <div class="like-share fix">
                                        <a href="#"><i class="zmdi zmdi-favorite"></i><span>89 喜欢</span></a>
                                        <a href="#"><i class="zmdi zmdi-comments"></i><span>59 评论</span></a>
                                        <a href="#"><i class="zmdi zmdi-share"></i><span>29 收藏</span></a>
                                    </div>
                                    <p>大量文本</p>
                                    <a href="#" class="button-2 text-dark-red">读更多</a>
                                </div>
                            </div>
                            <div class="col-xl-6 col-md-5">
                                <div class="blog-photo">
                                    <a href="#"><img src="assets/picture/18.jpg" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Single-blog end -->
                <!-- Single-blog start -->
                <div class="col-lg-6">
                    <div class="single-blog mt-30">
                        <div class="row">
                            <div class="col-xl-6 col-md-7">
                                <div class="blog-info">
                                    <div class="post-meta fix">
                                        <div class="post-date floatleft"><span class="text-dark-red">30</span></div>
                                        <div class="post-year floatleft">
                                            <p class="text-uppercase text-dark-red mb-0">June, 2021</p>
                                            <h4 class="post-title"><a href="#" tabindex="0">Farniture drawing 2021</a>
                                            </h4>
                                        </div>
                                    </div>
                                    <div class="like-share fix">
                                        <a href="#"><i class="zmdi zmdi-favorite"></i><span>89 Like</span></a>
                                        <a href="#"><i class="zmdi zmdi-comments"></i><span>59 Comments</span></a>
                                        <a href="#"><i class="zmdi zmdi-share"></i><span>29 Share</span></a>
                                    </div>
                                    <p>There are many variations of passages of Lorem Ipsum available, but the majority
                                        have suffered If you are going to use a passage Lorem Ipsum, you alteration in
                                        some form.</p>
                                    <a href="#" class="button-2 text-dark-red">Read more...</a>
                                </div>
                            </div>
                            <div class="col-xl-6 col-md-5">
                                <div class="blog-photo">
                                    <a href="#"><img src="assets/picture/25.jpg" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Single-blog end -->
            </div>
        </div>


    </div>
    <!-- BLGO-AREA END -->
    <!-- SUBSCRIVE-AREA START -->
    <div class="subscribe-area pt-80">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="subscribe">
                        <form action="javascript:;">
                            <input type="text" placeholder="Enter your email address">
                            <button class="submit-button submit-btn-2 button-one" data-text="subscribe" type="submit">
                                subscribe
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- SUBSCRIVE-AREA END -->
    <!-- FOOTER START -->
    <footer>
        <!-- Footer-area start -->
        <div class="footer-area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-6">
                        <div class="single-footer">
                            <h3 class="footer-title  title-border">Call我们</h3>
                            <ul class="footer-contact">
                                <li><span>地址 :</span>传个地址吗,<br>地址名, 国家名</li>
                                <li><span>手机 :</span>传个手机号？</li>
                                <li><span>Email :</span>传个邮件地址？</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6">
                        <div class="single-footer">
                            <h3 class="footer-title  title-border">帐目</h3>
                            <ul class="footer-menu">
                                <li><a href="contact.html"><i class="zmdi zmdi-dot-circle"></i>我的账目</a></li>
                                <li><a href="wishlist.html"><i class="zmdi zmdi-dot-circle"></i>我的 Wishlist</a></li>
                                <li><a href="cart.html"><i class="zmdi zmdi-dot-circle"></i>我的购物车</a></li>
                                <li><a href="login.html"><i class="zmdi zmdi-dot-circle"></i>Sign In</a></li>
                                <li><a href="#"><i class="zmdi zmdi-dot-circle"></i>Check out</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6">
                        <div class="single-footer">
                            <h3 class="footer-title  title-border">购物</h3>
                            <ul class="footer-menu">
                                <!--TODO 是否需要更改删除-->
                                <li><a href="#new-arrivals"><i class="zmdi zmdi-dot-circle"></i>新商品New Products</a></li>
                                <li><a href="#"><i class="zmdi zmdi-dot-circle"></i>Top Sellers</a></li>
                                <li><a href="#"><i class="zmdi zmdi-dot-circle"></i>制造商</a></li>
                                <li><a href="#"><i class="zmdi zmdi-dot-circle"></i>供应商家</a></li>
                                <li><a href="#discounts"><i class="zmdi zmdi-dot-circle"></i>特价</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="single-footer">
                            <h3 class="footer-title  title-border">您选择的商品</h3>
                            <div class="footer-product">
                                <div class="row">

                                    <!--TODO 读购物车前几个商品-->

                                    <div class="col-sm-6 col-12">
                                        <div class="footer-thumb">
                                            <a href="#"><img src="assets/picture/19.jpg" alt=""></a>
                                            <div class="footer-thumb-info">
                                                <!--TODO 动态新增时，根据商品写href或者直接指向购物车-->
                                                <p><a href="#">Furniture Product<br>Name</a></p>
                                                <h4 class="price-3">$ 60.00</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-12">
                                        <div class="footer-thumb">
                                            <a href="#"><img src="assets/picture/19.jpg" alt=""></a>
                                            <div class="footer-thumb-info">
                                                <p><a href="#">Furniture Product<br>Name</a></p>
                                                <h4 class="price-3">$ 60.00</h4>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer-area end -->
        <!-- Copyright-area start -->
        <div class="copyright-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="copyright">
                            <p class="mb-0">&copy; 2025.版权所有。 <a target="_blank" href="/"
                                                                                 title="网站模板">我们的网站</a></p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="payment  text-md-end">
                            <a href="https://wx.qq.com/"><img src="assets/picture/1.png" alt=""></a>
                            <a href="https://wx.qq.com/"><img src="assets/picture/2.png" alt=""></a>
                            <a href="https://wx.qq.com/"><img src="assets/picture/3.png" alt=""></a>
                            <a href="https://wx.qq.com/"><img src="assets/picture/4.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Copyright-area start -->
    </footer>
    <!-- FOOTER END -->
    <!-- QUICKVIEW PRODUCT 商品具体信息-->
    <!-- TODO 动态传商品具体信息 -->
    <div id="quickview-wrapper">
        <!-- Modal -->
        <div class="modal fade" id="productModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="modal-product">
                            <div class="product-images">
                                <div class="main-image images">
                                    <img alt="#" src="assets/picture/quickview-photo.jpg">
                                </div>
                            </div><!-- .product-images -->

                            <div class="product-info">
                                <h1>Aenean eu tristique</h1>
                                <div class="price-box-3">
                                    <hr>
                                    <div class="s-price-box">
                                        <span class="new-price">$160.00</span>
                                        <span class="old-price">$190.00</span>
                                    </div>
                                    <hr>
                                </div>
                                <a href="shop.html" class="see-all">查看所有功能in shop</a>
                                <div class="quick-add-to-cart">
                                    <form method="post" class="cart">
                                        <div class="numbers-row">
                                            <input type="number" id="french-hens" value="3" min="1">
                                        </div>
                                        <!--TODO 给这个button调用方法使之添加到购物车-->
                                        <button class="single_add_to_cart_button" type="submit">添加至购物车</button>
                                    </form>
                                </div>
                                <div class="quick-desc">
                                    一段用来填充板块的无意义文字
                                </div>
                                <div class="social-sharing">
                                    <div class="widget widget_socialsharing_widget">
                                        <h3 class="widget-title-modal">Share this product</h3>
                                        <ul class="social-icons">
                                            <li><a target="_blank" title="Google +" href="https://www.google.com/"
                                                   class="gplus social-icon"><i class="zmdi zmdi-google-plus"></i></a>
                                            </li>
                                            <li><a target="_blank" title="Twitter" href="https://baike.baidu.com/item/Twitter/2443267" class="twitter social-icon"><i
                                                    class="zmdi zmdi-twitter"></i></a></li>
                                            <li><a target="_blank" title="Facebook" href="https://zh-cn.facebook.com/"
                                                   class="facebook social-icon"><i class="zmdi zmdi-facebook"></i></a>
                                            </li>
                                            <li><a target="_blank" title="LinkedIn" href="https://www.linkedin.com/"
                                                   class="linkedin social-icon"><i class="zmdi zmdi-linkedin"></i></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div><!-- .product-info -->
                        </div><!-- .modal-product -->
                    </div><!-- .modal-body -->
                </div><!-- .modal-content -->
            </div><!-- .modal-dialog -->
        </div>
        <!-- END Modal -->
    </div>
    <!-- END QUICKVIEW PRODUCT -->

</div>
<!-- WRAPPER END -->

<!-- all js here -->
<!-- jquery latest version -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/jquery-migrate-3.3.2.min.js"></script>
<!-- bootstrap js -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- jquery.meanmenu js -->
<script src="assets/js/jquery.meanmenu.js"></script>
<!-- slick.min js -->
<script src="assets/js/slick.min.js"></script>
<!-- jquery.treeview js -->
<script src="assets/js/jquery.treeview.js"></script>
<!-- lightbox.min js -->
<script src="assets/js/lightbox.min.js"></script>
<!-- jquery-ui js -->
<script src="assets/js/jquery-ui.min.js"></script>
<!-- jquery.nivo.slider js -->
<script src="assets/js/jquery.nivo.slider.js"></script>
<script src="assets/js/home.js"></script>
<!-- jquery.nicescroll.min js -->
<script src="assets/js/jquery.nicescroll.min.js"></script>
<!-- countdon.min js -->
<script src="assets/js/countdon.min.js"></script>
<!-- wow js -->
<script src="assets/js/wow.min.js"></script>
<!-- plugins js -->
<script src="assets/js/plugins.js"></script>
<!-- main js -->
<script src="assets/js/main.min.js"></script>




<!--实现-->
<script>
    //查询全部商品，并显示在页面上，格式为
    // <!-- Single-product start -->
    // <div class="single-product">
    //     <!--图片层-->
    //     <div class="product-img">
    //         <span class="pro-label new-label">新</span>
    //         <a href="single-product.html"><img src="assets/picture/16.jpg" alt=""></a>
    //         <div class="product-action clearfix">
    //             <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
    //                title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
    //             <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
    //                title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
    //             <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
    //                 class="zmdi zmdi-refresh"></i></a>
    //             <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
    //                title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
    //         </div>
    //     </div>
    //     <!--文本层-->
    //     <div class="product-info clearfix">
    //         <div class="fix">
    //             <h4 class="post-title floatleft"><a href="#">产品名</a></h4>
    //             <p class="floatright hidden-sm d-none d-md-block">设备</p>
    //         </div>
    //         <div class="fix">
    //             <!-- TODO 传值价格-->
    //             <span class="pro-price floatleft">$ 56.20</span>
    //         </div>
    //     </div>
    // </div>
    // 获取商品数据并渲染
    function loadProducts() {
        $.ajax({
            url: '/products',
            type: 'GET',
            dataType: 'json',
            success: function(products) {
                const container = $('#product-container'); // 商品容器
                container.empty(); // 清空现有内容

                // 遍历商品数据并渲染
                products.forEach(product => {
                    const productHtml = `
                    <div class="single-product">
                        <!--图片层-->
                        <div class="product-img">
                            <span class="pro-label new-label">新</span>
                            <a href="single-product.html?id=${product.productsid}">
                                <img src="${product.imageUrl || 'assets/picture/16.jpg'}" alt="${product.name}">
                            </a>
                            <div class="product-action clearfix">
                                <a href="wishlist.html" data-bs-toggle="tooltip" data-placement="top"
                                   title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
                                <a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
                                   title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
                                <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i
                                    class="zmdi zmdi-refresh"></i></a>
                                <a href="cart.html" data-bs-toggle="tooltip" data-placement="top"
                                   title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
                            </div>
                        </div>
                        <!--文本层-->
                        <div class="product-info clearfix">
                            <div class="fix">
                                <h4 class="post-title floatleft"><a href="#">${product.name}</a></h4>
                                <p class="floatright hidden-sm d-none d-md-block">${product.category || '设备'}</p>
                            </div>
                            <div class="fix">
                                <span class="pro-price floatleft">¥ ${product.price.toFixed(2)}</span>
                            </div>
                        </div>
                    </div>
                `;
                    container.append(productHtml);
                });
            },
            error: function(xhr, status, error) {
                console.error('获取商品数据失败:', error);
            }
        });
    }

    // 页面加载时调用
    $(document).ready(function() {
        loadProducts();
    });



    $(document).ready(function() {
        //监听表单提交事件
        $('#loginForm').on('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 获取表单数据
            var email = $('#email').val().trim();
            var password = $('#password').val().trim();

            // 验证输入是否为空
            if (!email || !password) {
                $('#responseMessage').html('<p class="text-danger">请输入邮箱和密码！</p>');
                return;
            } else {
                // 如果所有输入框都已填写，隐藏错误信息并允许提交
                $('#responseMessage').html('');
                }

            // 发送 AJAX 请求
            $.ajax({
                url: '/api/login',
                type: 'POST',
                dataType: 'json',
                data:  {
                    email: $("#email").val(),
                    password: $("#password").val()
                },
                success: function(response) {

                    if (response.success) {


                    } else {

                    }
                },
                error: function(xhr, status, error) {

                    $('#responseMessage').html('<p class="text-danger">登录失败，请稍后再试！</p>');
                }
            });
        });
    });


</script>
</body>
</html>
